<template>
  <div> 
    <div id="order-map">
      <div id="order-map-content">
        <div class="item r1 item1">生产商</div>
        <div class="item r1 item2" id="info1">{{ prop.tabelInfo['producer'] }}</div>

        <div class="item r2 item7" id="qrcode">
          <canvas id="qrcodechild"></canvas>
        </div>
        <div class="item r1 item3">委托方</div>
        <div class="item r1 item4" id="info2">SG-PX</div>


        <div class="item r2 item5">型号</div>
        <div class="item r2 item6 wig2" id="info3">{{ prop.tabelInfo['type'] }}</div>
        <div class="item r3 item8">名称</div>
        <div class="item r3 item9 wig2" id="info4">{{ prop.tabelInfo['goodName'] }}</div>
        <div class="item r4 item10">批次</div>
        <div class="item r4 item11" id="info5">
          {{ prop.tabelInfo.productType ? prop.tabelInfo['batchNo'] : (prop.tabelInfo['batchNo'] + 'D') }}
        </div>

        <div class="item r8 item16">唯一码</div>
        <div class="item r8 item17" id="info10">
          <canvas></canvas>
        </div>

        <div class="item r5 item12">数量</div>
        <div class="item r5 item13 wig" id="info6">1</div>

        <div class="item r5 item14">包装信息</div>
        <div class="item r5 item15">包</div>


        <div class="item r7 item18">净重</div>
        <div class="item r7 item19 wig" id="info8">{{ prop.tabelInfo['suttle'] }}</div>

        <div class="item r6 item22">收货日期</div>
        <div class="item r6 item23" id="info7">{{ prop.tabelInfo['deliveryTime'] }}</div>


        <div class="item r9 item24">标签号</div>
        <div class="item r9 item25" id="info11">{{ prop.tabelInfo['number'] + '/' + prop.tabelInfo.totalNum }}</div>
        <div class="item r9 item26" id="info12">DCHAIN德辰供应链</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, reactive} from "vue";
import { drawQRCode2, drawBarcode2 } from '../qrcode.js'

const prop = reactive({
  tabelInfo: {
    batchNo: "2423082402",
    cktype: 0,
    ckxh: "1000000000000127",
    client: "上港拼箱",
    createTime: "2023-11-14T08:31:30.000+00:00",
    createTime2: "2023-11-14 16:31:30",
    deliveryTime: "2023年11月14日",
    flowNo: "BY20231114163129496",
    goodName: "硫酸锂-1000KG",
    id: 82720,
    isAsc: "asc",
    kwbm: "CQB25",
    number: "14",
    number2: "14/40",
    onlyOne: "BY20231114163129496",
    orderBy: "",
    producer: "SQM",
    productType: 0,
    qybm: "1000000009",
    reasonable: true,
    rkdh: "1000000000084171",
    storageNo: "LSI(S)-1000KG",
    supplyChain: "德辰供应链",
    suttle: "1000KG",
    totalNum: 40,
    trayNumber: "",
    type: "LSI(S)-1000KG",
  }
})
onMounted(()=>{
  qr()
})

const qr = () => {
  let info = prop.tabelInfo
  //生成二维码
  let erweiStr = `生产商:${info.producer}\n委托方:${info.client}\n` +
      `型号:${info.type}\n批次:${info.batchNo}\n净重:${info.suttle}\n供应链:DCHAIN德辰供应链\n` +
      `序号:${info.number}\n唯一码:${info.onlyOne}`
  let h = 285
  let height = h * 38 / 270
  let width = 1 * h / 270
  let fontsize = h * 16 / 270
  //生成条形码
  let waveCode = document.getElementById('info10')
  drawBarcode2(waveCode.children[0], info.onlyOne, width, height, fontsize)

  height = h * 105 / 270
  width = h * 105 / 270
  let canvasSF2 = document.getElementById('qrcodechild')
  drawQRCode2(erweiStr, canvasSF2, width, height)
}
</script>

<style scoped lang="scss">

$w: 285px;
#order-map {
  width: calc($w * 750 / 750);
  height: calc($w * 1300 / 750);
  padding: calc($w * 25 / 750);
  box-sizing: border-box;
}

#order-map-content {
  width: 100%;
  height: 100%;
  border: calc($w * 2 / 750) solid black;
  display: grid;
  grid-template-columns: 1fr 1.81fr 1.076fr 1.5fr;
  grid-template-rows:repeat(2, 1.4fr) repeat(2, 0.7fr) 1.5fr 1.5fr 1fr 1fr 1fr;
  font-size: calc($w * 37 / 750);
}

.item {
  border: calc($w * 2 / 750) solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item6 {
  grid-column: 2/5;
}

.item9 {
  grid-column: 2/5;
}

.item7 {
  grid-column: 3/5;
  grid-row: 1/3;
  //max-width: calc($w * 194 / 750)
}

#qrcodechild {
  width: calc($w * 185 / 750);
  height: calc($w * 185 / 750);
}

.item11 {
  grid-column: 2/5;
  font-weight: bolder;
  font-size: calc($w * 80 / 750);
}

.item17 {
  grid-column: 2/5;
}

.item14 {
  font-size: calc($w * 32 / 750);
}
.item22 {
  font-size: calc($w * 32 / 750);
}
.item23 {
  max-width: calc($w * 230 / 750);
  word-break: break-all;
  padding: calc($w * 5 / 750);
  font-size: calc($w * 20 / 750);
}

.item25 {
  font-weight: bold;
  font-size: calc($w * 80 / 750);
  line-height: calc($w * 49 / 750);
}

.item26 {
  grid-column: 3/5;
}

.item27 {
  font-size: calc($w * 28 / 750);
  max-width: calc($w * 194 / 750);
  word-break: break-all;
  line-height: calc($w * 28 / 750);
}

.wig {
  font-weight: bolder;
  font-size: calc($w * 60 / 750);
}

.wig2 {
  font-weight: bolder;
  font-size: calc($w * 60 / 750);
}

.wig3 {
  font-weight: bolder;
  font-size: calc($w * 46 / 750);
}

#info7 {
  font-size: calc($w * 36 / 750);
}


</style>
